<style scoped>
    .quill-editor {
        height:400px ;
    }
    .inputFile{
        width:58px;
        height: 58px;
        line-height: 58px;
        border: 1px dashed #738096;
        text-align: center;
        border-radius: 5px;
        z-index:0;
        position: relative;
    }
    .inputFile:hover{
        border: 1px dashed #4074E1;
        cursor: pointer;
    }
    #test_upload{
        z-index: 999;
        position: absolute;
        left: 0;
        opacity:0;

    }
    .ivu-select-dropdown,.ivu-select-dropdown-list{
        z-index:9999999!important;
    }
    .pad20{
        padding: 20px;
    }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="pad20">
            <Form :labelWidth="120" :rules="ruleValidate" ref="formItem" :model="formItem" >
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="8">
                        <FormItem label="产品名称" prop="id">
                            <Select v-model="formItem.id" :disabled="canchange" filterable >
                                <template v-for="item in all_list" >
                                    <Option :value="item.id" :key="item.id" >{{item.name}}</Option>
                                </template>
                            </Select>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="8">
                        <FormItem label="条款名称" prop="name">
                            <i-input placeholder="请输入条款名称" v-model="formItem.name"></i-input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row style="z-index:88;">
                    <i-col :xs="24" :sm="24" :md="24" :lg="12" style="">
                        <FormItem label="保险责任" >
                            <UE :defaultMsg="formItem.rights" ref="rights" id="rights" ></UE>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="12" style="">
                        <FormItem label="投保核保规则">
                            <UE :defaultMsg="formItem.rule" ref="rule" id="rule"></UE>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="12" style="">
                        <FormItem label="病重详情">
                            <UE :defaultMsg="formItem.illness" ref="illness" id="illness"></UE>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="12" style="">
                        <FormItem label="案例说明">
                            <UE :defaultMsg="formItem.case_name" ref="case_name" id="case_name"></UE>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="12" style="">
                        <FormItem label="详细条款">
                            <UE :defaultMsg="formItem.term" ref="term" id="term"></UE>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="12">
                        <FormItem label="上传条款">
                            <div  class="inputFile">
                                <!--暂未限制上传-->
                                <input type="file" id='test_upload' @change="uploading"/>
                                <!--<Icon type="camera" ></Icon>-->
                                <Icon type="arrow-up-a" size="20"></Icon>
                            </div>
                            <span>{{formItem.detail_name}}</span>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="4" :sm="4" :md="2" :lg="2">
                        <FormItem>
                           <Button @click="handleSubmit('formItem')" type="primary">提交</Button>
                        </FormItem>
                    </i-col>
                    <i-col :xs="4" :sm="4" :md="2" :lg="2">
                        <FormItem>
                           <Button @click="back()" type="">取消</Button>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle';
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor } from 'vue-quill-editor'
    import {add_clause,update_clasuse ,get_all_pro} from '../../api/product_v2.js'    // detaill_clasuse,
    import { getStsTokenWrite,getStsTokenRead } from '../../api/common';
    import UE from '../UE/ue.vue';
    import '../../../static/UEdit/ueditor.config.js';
    import '../../../static/UEdit/ueditor.all.js';
    import '../../../static/UEdit/lang/zh-cn/zh-cn.js';
    import '../../../static/UEdit/ueditor.parse.js';
    export default {
        data() {
            return {
                all_list:[],
                formItem:{
                    id:'',
                    name:'',
                    rights:'',
                    rule:'',
                    illness:'',
                    case_name:'',
                    term:'',
                    pid:'',
                    detail_file:'',
                    detail_name:''
                },
                canchange:false,
                ruleValidate:{
                    id: [
                        { required: true, message: '不能为空'}
                    ],
                    name: [
                        { required: true, message: '不能为空'}
                    ]
                }
            }
        },
        components:{
            productTitle,
            UE
        },
        created(){
            if(this.$route.params.id){
                this.canchange=true;
                this.get_detail();
                this.formItem.id = this.$route.params.id;
            }else{
                this.list();
            }
        },
        methods:{
            getUEContent() {
                this.formItem.rights = this.$refs.rights.getUEContent();
                this.formItem.rule = this.$refs.rule.getUEContent();
                this.formItem.illness = this.$refs.illness.getUEContent();
                this.formItem.case_name = this.$refs.case_name.getUEContent();
                this.formItem.term = this.$refs.term.getUEContent();
            },
            list(){
                if(!this.$route.params.id){
                    new Promise((rev,rej)=>{
                        get_all_pro().then(res=>{
                            if(res.data.err==0){
                                this.all_list = res.data.data.list;
                            }else{
                                this.$Message.error(res.data.info)
                            }
                            rev()
                        }).catch(error=>{
                            rej(error)
                        })
                    })
                }else{
                    this.canchange=true;
                }

            },
            get_detail(){
                let params={
                    id:this.$route.params.id,
                    name:this.$route.params.name
                }
                // new Promise((rev,rej)=>{
                //     detaill_clasuse(params).then(res=>{
                //         if(res.data.err==0){
                //             this.formItem = res.data.data;
                //         }else{
                //             this.$Message.error(res.data.info)
                //         }
                //     })
                //     rev()
                // }).catch(error=>{
                //     rej(error)
                // })
            },
            handleSubmit(name){
                new Promise((rev,rej)=>{
                    this.getUEContent();
                    this.getToken1();
                    rev()
                }).then(()=>{
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            new Promise((rev, rej) => {
                                add_clause(this.formItem).then(res => {
                                    if (res.data.err == 0) {
                                        this.$router.push({name: 'clause_list'})
                                    } else {
                                        this.$Message.error(res.data.info)
                                    }
                                })
                                rev()
                            }).catch(error => {
                                rej(error)
                            })
                        } else {
                            this.$Message.error('参数出错!');
                        }
                    })
                })
            },
            uploading(){
                const files = document.getElementById('test_upload');
                if(files.files){
                    const file = files.files[0];
                    this.formItem.detail_name = file.name;
                }
            },
            getToken1(){
                new Promise((resolve, reject) => {
                    getStsTokenWrite().then(response => {
                        if (response.data.err == 0) {
                            this.sts = response.data.data.Credentials;
                            var client = new OSS.Wrapper({
                                region: 'oss-cn-hangzhou',
                                accessKeyId: this.sts.AccessKeyId,
                                accessKeySecret: this.sts.AccessKeySecret,
                                stsToken: this.sts.SecurityToken,
                                bucket: 'kuaibao-imgs',
                                secure: true,
                            });
                            const files = document.getElementById('test_upload');
                            const file = files.files[0];
                            client.multipartUpload(this.formItem.detail_name, file,{}).then(results=>{
                                    this.formItem.detail_file = results.url;
                            })
                        }
                    })
                })
            },
            getToken(){
                new Promise((resolve, reject) => {
                    getStsTokenWrite().then(response => {
                        if (response.data.err == 0) {
                            this.sts = response.data.data.Credentials;
                            var client = new OSS.Wrapper({
                                region:'oss-cn-hangzhou',
                                accessKeyId: this.sts.AccessKeyId,
                                accessKeySecret: this.sts.AccessKeySecret,
                                stsToken: this.sts.SecurityToken,
                                bucket: 'kuaibao-imgs',
                                secure: true,
                            });
                            const files = document.getElementById('test_upload');
                            if(files.files){
                                const file = files.files[0]
                                var imageType = /^image\//;
                                //是否是图片
                                if (!imageType.test(file.type)) {
                                    alert("请选择图片！");
                                    return;
                                }
                                const storeAs = file.name
                                this.img_name =file.name
                                r.readAsDataURL(file);
                                r.onload=function  (e) {
                                }
                                this.formItem.clause_name = files.files[0].name;
                                client.multipartUpload(storeAs, file, {

                                }).then((results) => {
                                    this.formItem.pic = results.url;
                                    if(results.url){
                                        this.resultUpload.push(results.url);
                                    }else{
                                        if(results.name === file.name){
                                            console.log(results.url)
                                            const url = this.bucketUrl+ file.name
                                            this.resultUpload.push(url);
                                        }
                                    }
                                }).catch((err) => {
                                    console.log(err)
                                })
                            }
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            back(){
                this.$router.push({name: 'clause_list'});
            }
        }

    }
</script>


